<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
	margin: 200px auto;
	/* border: 2px solid ; */
	width: 400px;
	height: 200px;
}
</style>
</head>
<body>
	<div id="div1">
		<font>请选择你喜欢的球类： </font> <input id="inp1" type="checkbox"> <font>全选/全不选
		</font> <br> <font>足球</font> <input id="inp2" type="checkbox" name="a">
		<font>蓝球</font> <input id="inp3" type="checkbox" name="a"> <font>羽毛球</font>
		<input id="inp4" type="checkbox" name="a"> <font>乒乓球</font> <input
			id="inp5" type="checkbox" name="a"> <br>
		<button id="b1">全选</button>
		<button id="b2">全不选</button>
		<button id="b3">反选</button>
		<button id="b4">提交</button>
	</div>
	<script type="text/javascript">
		var b1 = document.getElementById('b1');
		var b2 = document.getElementById('b2');
		var b3 = document.getElementById('b3');
		var b4 = document.getElementById('b4');
		var as = document.getElementsByName('a');
		var inp1 = document.getElementById('inp1');
		var inp2 = document.getElementById('inp2');
		var inp3 = document.getElementById('inp3');
		var inp4 = document.getElementById('inp4');
		var inp5 = document.getElementById('inp5');
		b1.onclick = function() {
			inp1.checked = true;
			for (var i = 0; i < as.length; i++) {
				as[i].checked = true;
			}
		}
		b2.onclick = function() {
			inp1.checked = false;
			for (var i = 0; i < as.length; i++) {
				as[i].checked = false;
			}
		}
		inp1.onclick = function() {

			for (var i = 0; i < as.length; i++) {
				as[i].checked = inp1.checked;
			}

		}
		b3.onclick = function() {
			inp1.checked = true;
			for (var i = 0; i < as.length; i++) {
				as[i].checked = !as[i].checked;
				if (!as[i].checked) {
					inp1.checked = false;
				}
			}
		}

		for (var i = 0; i < as.length; i++) {
			console.log(i);
		as[i].onclick = function() {
				inp1.checked = true;
				for (var j = 0; j < as.length; j++) {
					if (!as[j].checked) {
						inp1.checked = false;
					}
				}
			}
		}
	</script>

</body>
</html>